<template>
<div>
    <h2>{{ title }} </h2>
    <button @click="changeContent">更改内容</button>
</div>

</template>

<script lang="ts" setup name="lifecycle">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated,ref } from 'vue';

let title=ref('Vue3 的生命周期')

function changeContent(){
        title.value+='~'
}


console.log("setup 就已经是创建了")

onBeforeMount(()=>{
    console.log("onBeforeMount挂载前")
})
onMounted(()=>{
    console.log("onMounted挂载后")
})
onBeforeUpdate(()=>{
    console.log("onBeforeUpdate更新前")
})

onUpdated(()=>{
    console.log("onUpdated更新后")
})

onBeforeUnmount(()=>{
    console.log("onBeforeUnmount卸载之前")
})

onUnmounted(()=>{
    console.log("onUnmounted 卸载之后")
})


</script>